<template>
  <!--  传统-->
  <div @click="$store.commit('add')">{{ $store.state.count }}</div>
  <!--composition写法-->
  <div @click="add">{{ count }}</div>

  <ul>
    <li>
      <NavLink to="/"></NavLink>
    </li>
    <li>
      <NavLink to="/todo"></NavLink>
    </li>
    <li>
      <NavLink to="/about"></NavLink>
    </li>
  </ul>
</template>

<script>
import NavLink from "./NavLink.vue";
import {useStore} from 'vuex'
import {toRefs} from 'vue'
export default {
  name: "Dashboard.vue",
  components: {
    NavLink,
  },
  setup() {
    const store = useStore()
    return {
      ...toRefs(store.state),
      add() {
        store.commit('add')
      }
    }
  }
}

</script>

<style scoped>
li {
  height: 900px;
}
</style>
